<!-- 组件库 -->
<template>
    <div>
        <div class="header">
            <div class="name">组件库（{{ compTotalNum }}）</div>
            <div class="btns">
                <div class="head_btn" @click="handleCompRefresh">
                    <el-tooltip effect="dark" content="刷新" placement="bottom">
                        <i class="el-icon-refresh"></i>
                    </el-tooltip>
                </div>
            </div>
        </div>
        <div
            class="top-nav"
            v-loading="loading"
            element-loading-text="组件库更新中..."
            element-loading-spinner="el-icon-loading"
            element-loading-background="rgba(0, 0, 0, 0.8)"
        >
            <el-menu
                class="nav"
                mode="vertical"
                background-color="#212528"
                text-color="#fff"
                active-text-color="#409EFF"
                :unique-opened="true"
                @mousedown="contain.handleMouseDown"
            >
                <el-submenu index="1">
                    <template slot="title">
                        <i class="el-icon-location"></i>
                        <span slot="title">基础组件</span>
                    </template>
                    <!-- <el-submenu index="1-1">
                        <span slot="title">图表</span>
                        <el-menu-item index="1-1-1">选项1</el-menu-item>
                        <el-menu-item index="1-1-2">选项2</el-menu-item>
                    </el-submenu> -->
                    <el-submenu
                        :index="index + ''"
                        v-for="(item, index) in baseList"
                        :key="`1-${index}`"
                    >
                        <template slot="title">
                            <el-tooltip
                                effect="dark"
                                :content="item.label"
                                placement="left"
                            >
                                <i
                                    :class="'nav__icon iconfont ' + item.icon"
                                ></i>
                            </el-tooltip>
                            <span
                                >{{ item.label }}（{{
                                    item.children.length
                                }}）</span
                            >
                        </template>
                        <div class="components-menu">
                            <el-menu-item
                                v-for="(citem, cindex) in item.children"
                                @click="handleAdd(citem.option, true)"
                                :key="`1-${index}-${cindex}`"
                                class="menu-inline"
                                :index="`1-${index}-${cindex}`"
                            >
                                <div class="usehove">
                                    <div
                                        class="bottom-text"
                                        :title="citem.label"
                                    >
                                        {{ citem.label }}
                                    </div>
                                    <img
                                        :src="citem.thumbnail"
                                        class="inside-img"
                                    />
                                </div>
                            </el-menu-item>
                        </div>
                    </el-submenu>
                </el-submenu>
            </el-menu>
        </div>
    </div>
</template>

<script>
import { uuid } from "@/utils/utils";
import { website } from "@/config.js";
import { getList } from "@/api/componentList";
export default {
    inject: ["contain"],
    provide() {
        return {
            contain: this.contain
        };
    },
    data() {
        return {
            loading: false,
            baseList: []
            // baseList: website.baseList
        };
    },
    created() {
        this.getCompList();
    },
    computed: {
        compTotalNum() {
            return this.baseList.reduce((pre, cur) => {
                pre += cur.children.length;
                return pre;
            }, 0);
        }
    },
    methods: {
        // 从组件库初始化组件进入画布
        handleAdd(option, first = false) {
            let obj = this.deepClone(option);
            obj.left = 0;
            obj.top = 0;
            obj.display = true;
            obj.isLock = false;
            obj.index = uuid();
            if (first) {
                this.$store.commit("setCanvasCompsList", [obj]);
            } else {
                this.contain.nav.push(obj);
            }
        },
        getCompList() {
            this.loading = true;
            getList({
                componentType: "BASE",
                current: 1,
                size: 200
            })
                .then((res) => {
                    let data = res.data.data.records;
                    data.forEach((d) => {
                        d.label = d.name;
                        d.option = JSON.parse(d.componentJson || "{}");
                    });
                    let result = [
                        {
                            icon: "icon-bar",
                            label: "图表",
                            classify: "CHART",
                            children: []
                        },
                        {
                            icon: "icon-text",
                            label: "表单",
                            classify: "FORM",
                            children: []
                        },
                        {
                            icon: "icon-img",
                            label: "媒体",
                            classify: "MEDIA",
                            children: []
                        },
                        {
                            icon: "icon-flop",
                            label: "指标",
                            classify: "TARGET",
                            children: []
                        },
                        {
                            icon: "icon-table",
                            label: "表格",
                            classify: "TABLE",
                            children: []
                        },
                        {
                            icon: "icon-datav",
                            label: "其它",
                            classify: "OTHER",
                            children: []
                        }
                    ];
                    data.map((d) => {
                        if (d.classify == "CHART") {
                            result[1].children.push(d);
                        }
                        if (d.classify == "MEDIA") {
                            result[2].children.push(d);
                        }
                        if (d.classify == "TARGET") {
                            result[3].children.push(d);
                        }
                        if (d.classify == "TABLE") {
                            result[4].children.push(d);
                        }
                    });
                    this.baseList = result;
                })
                .catch(() => {})
                .finally(() => {
                    this.loading = false;
                });
        },
        loadComp() {
            this.getCompList();
        },
        // 组件库刷新
        handleCompRefresh() {
            this.getCompList();
        }
    }
};
</script>

<style lang="scss">
.top-nav {
    height: calc(100vh - 80px) !important;
    overflow: hidden;
    overflow-y: auto;
    .nav {
        border-bottom: 0 !important;
        // height: 45px;
        // line-height: 45px;
        overflow: hidden;
    }
    .nav__icon {
        margin-right: 5px;
    }
    .nav .el-submenu .el-submenu__title,
    .nav .el-menu-item {
        height: 45px;
        line-height: 45px;
        font-size: 12px;
    }

    .el-menu-item {
        height: 100px !important;
    }
}
// .el-menu--vertical {
//     .menu-inline {
//         text-align: center;
//         display: inline-block !important;
//     }
//     .bottom-text {
//         color: #b1b1b1;
//     }

//     .inside-img:hover {
//         border-color: #006eff;
//     }
//     .usehove:hover {
//         .bottom-text {
//             color: #fff;
//         }
//     }
// }
.components-menu {
    .el-menu-item {
        padding: 0px !important;
        min-width: 100%;
        height: 100px !important;
        background-color: #000 !important;

        // margin-bottom: 16px;
        .bottom-text {
            line-height: 20px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            background-color: #212326;
            border-top-left-radius: 3px;
            border-top-right-radius: 3px;
            padding-left: 5px;
        }
        .inside-img {
            width: 100%;
            height: 80px;
            border: 2px solid transparent;
            box-sizing: border-box;
            background-color: #17191c;
            border-bottom-left-radius: 3px;
            border-bottom-right-radius: 3px;
        }
    }
}
</style>
